<template>
  <div class="app-container">
    <el-row :gutter="15">
      <!-- 菜单授权 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="7">
        <el-row>
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
              <el-tooltip class="item" effect="dark" content="选择指定角色分配菜单" placement="top">
                <span class="role-span">专业列表</span>
              </el-tooltip>
            </div>
            <el-tree
              ref="tree"
              :data="specialty"
              show-checkbox
              empty-text="暂无查询到专业列表"
              node-key="id"
              @check="selectSpecialty"
              highlight-current
              default-expand-all
              :expand-on-click-node="false"
              :props="defaultProps"
            />
          </el-card>
        </el-row>
      </el-col>
      <!--课程管理-->
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17" style="margin-bottom: 10px">
        <mark-down :data="data" ref="mark"></mark-down>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import service from '../../../utils/request'
  import MarkDown from '../../components/MarkDown'
  import {listajaxSpecialty, listajax, pageQueryPlanCourse, delPlanCourse} from '@/api/admin/plan/plan'
  import program from '@/api/admin/program/index'


  // crud交由presenter持有
  export default {
    components: {
      MarkDown
    },
    name: 'Role',
    data() {
      return {
        total: 0,
        currentId: 0, menuLoading: false,
        defaultProps: {
          label: 'name'
        },
        params: {
          specialtyId: null
        },
        data: "",
        specialty: [],
        program: null,
        isAdd: false,
        loading: true,
        specialtyId: null,
        planId: null,
      }
    },
    created() {
      listajaxSpecialty().then(res => {
        this.specialty = res
      })
    },
    methods: {
      sizeChange(val) {
        this.params.limit = val
        this.load()
      },
      pageChange(val) {
        this.params.offset = val
        this.load()
      },
      loadRole() {
        service.get('/api/role/pageQuery', {params: this.params}).then(res => {
          this.roleData = res.records
          this.loading = false
          this.params.offset = res.current
          this.total = res.realTotal
        })
      },
      selectSpecialty(node, key, halfNode, halfKey) {
        if (key.checkedKeys.length == 0) {
          this.specialtyId = null
          this.plan = null
        } else {
          this.$refs.tree.setCheckedKeys([node.id]);
          this.specialtyId = node.id
          this.params['specialtyId'] = this.specialtyId
          program.findProgram(this.params).then(res => {
            this.program = res
            this.$refs.mark.specialtyId = this.specialtyId
            this.$refs.mark.program = this.program
            if (res != null && res != "") {
              this.data = res.name
            }else{
              this.data = res
            }
          })
        }
      },
      selectPlan(node, key, halfNode, halfKey) {
        if (key.checkedKeys.length == 0) {
          this.planId = null
          this.courseData = null
        } else {
          this.$refs.planTree.setCheckedKeys([node.id]);
          this.planId = node.id
          this.params.planId = this.planId
          pageQueryPlanCourse(this.params).then(res => {
            this.courseData = res.records
            this.params.offset = res.current
            this.total = res.total
          })
        }
      },
      addCourse(val) {
        this.$refs.courseList.dialog = true
        this.$refs.courseList.form.planId = this.planId
        this.$refs.courseList.load()
      },
      subDelete(id) {
        this.$confirm('确定进行此操作吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delPlanCourse(id).then(res => {
            this.$notify({
              title: '成功',
              type: 'success',
              duration: 2500
            })
            this.loadCourse()
          }).catch(err => {
            console.log(err.response.data.message)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .role-span {
    font-weight: bold;
    color: #303133;
    font-size: 15px;
  }
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
